{% load static %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'article/css/list.css' %}"/>

<div class="text-list">
    <div class="article">
    <div class="container mt-4">

        <div class="tit1">
            <img src="http://xsc.ruc.edu.cn/images/ztzl.png" alt="">
            <a href="">MORE +</a>
        </div>

        <div class="list-group">
            {% for article in articles %}
                <a href="{% url 'detail' article.id %}" class="list-group-item list-group-item-action"
                   aria-current="true">
                    <div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-1">{{ article.title }}</h6>
                        <small>发布时间 {{ article.created|date:"Y-m-d" }}</small>
                    </div>
                </a>
            {% empty %}
                <div class="alert alert-warning" role="alert">
                    No articles found.
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<div class="newspaper">
    <div class="container mt-4">
        <div class="tit1">
            <img src="http://xsc.ruc.edu.cn/images/xwzx.png" alt="">
            <a href="">MORE +</a>
        </div>

        <div class="list-group">
            {% for article in newspaper %}
                <a href="{% url 'detail' article.id %}" class="list-group-item list-group-item-action"
                   aria-current="true">
                    <div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-1">{{ article.title }}</h6>
                        <small>发布时间 {{ article.created|date:"Y-m-d" }}</small>
                    </div>
                </a>
            {% empty %}
                <div class="alert alert-warning" role="alert">
                    No articles found.
                </div>
            {% endfor %}
        </div>
    </div>
</div>
</div>



<style>
    .tit1{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .tit1 a{
        text-decoration: none;
        color: #202020;
        background-color: #dddddd;
        height: 24px;
        width: 65px;
    }
    .text-list{
        display: flex;
        justify-content: space-around;
    }
</style>

